.index-swiper {
  width: 100%;
  height: 1140rpx;
  position: relative;
  z-index: 0;

  .box {
    width: 100%;
    height: 100%;

    .item {
      width: 100%;
      height: 100%;
      color: #fff;

      &.color0 {
        background-color: red;
      }

      &.color1 {
        background-color: black;
      }

      &.color2 {
        background-color: blue;
      }
    }
  }

  .dots {
    width: 100%;
    height: 30rpx;
    position: absolute;
    left: 0;
    bottom: 208rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .dot {
      width: 10rpx;
      height: 10rpx;
      background: #D9D9D9;
      opacity: 0.72;
      border-radius: 5rpx;
      margin: 0 8rpx;
      transition: all .2s;

      &.active {
        width: 24rpx;
        background: linear-gradient(90deg, #E3F75E 0%, #A1F133 100%);
      }
    }
  }

  .search-ipt {
    position: absolute;
    width: 678rpx;
    height: 88rpx;
    line-height: 88rpx;
    left: -344rpx;
    margin-left: 50%;
    top: 972rpx;
    background-color: #F0F2F4;
    border-radius: 36rpx;
    color: #999999;
    font-size: 32rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}